<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class=""> 内容详情 </view>
      <view class="head_right">
        <view class="zhuan">
          <image
            src="@/static/images/slices/icon_bai_zhunfa.png"
            mode=""
          ></image>
        </view>
      </view>
    </view>
    <view class="box">
      <view class="box_head">
        <view class="head_image">
          <image
            src="@/static/weichuang/pic_yonghuzhuye_touxiang_pic.png"
            mode=""
          ></image>
        </view>
        <view class="head_flx">
          <view class="flx1"> 华胥星球 </view>
          <view class="flx2"> 发布讨论 </view>
        </view>
        <view class="head_right">
          <u-icon name="plus" color="#fff"></u-icon>
          <text style="margin-left: 10rpx">关注</text>
        </view>
      </view>
      <view class="box_content">
        <view class="content_t"> 品牌在历史上也有着重要的三次改变 </view>
        <view class="content_text">
          巴纳姆效应是指人们容易相信一种对于自己的笼统描述。即使这种描述十分模糊、空洞及普遍，人们还是确信这就是符合自己人格面貌的准确评价。“巴纳姆效应”产生的原因被认为是“主观验证”的作用。我们如果想要相信一件事，总可以搜集到各种各样支持自己的证据。就算是毫不相干的事情，我们还是可以找到一个逻辑让它符合自己的设想。蓝色是世界上最受欢迎的颜色，它往往会让人联想到水和天空。但是人们却不喜欢蓝色的食物，因为它会让人联想到变质。蓝色能让人在白天更加警觉和健康，在夜晚则会干扰睡眠。当你需要一种喜闻乐见的颜色时，蓝色是首选，但不能把食品设计成蓝色。
        </view>
        <!-- 图片 -->
        <view class="jiugong">
          <image src="@/static/weichuang/pic_yonghuzhuye_jiu_yi.png"></image>
          <image src="@/static/weichuang/pic_yonghuzhuye_jiu_yi.png"></image>
          <image src="@/static/weichuang/pic_yonghuzhuye_jiu_yi.png"></image>
        </view>
      </view>
    </view>
    <view class="distance"> </view>
    <view class="interaction">
      <view class="interaction_tabs">
        <u-tabs
          class="tabs"
          :list="list1"
          @click="click"
          :activeStyle="{
            color: '#444',
            fontWeight: 'bold',
            transform: 'scale(1.05)',
            'font-size': '32rpx',
          }"
          lineColor="#444444"
          :inactiveStyle="{
            color: '#888888',
            transform: 'scale(1)',
            'font-size': '32rpx',
          }"
        ></u-tabs>
      </view>
      <view class="interaction_box">
        <reviewContent :reply="false" :text="text"></reviewContent>
        <reviewContent :reply="false" :text="text"></reviewContent>
        <reviewContent :reply="false" :text="text"></reviewContent>
      </view>
    </view>
    <view style="width: 100%; height: 120rpx"> </view>
    <view class="operate">
      <view
        class="inp"
        :style="{
          width: inp ? '340rpx' : '502rpx',
        }"
      >
        <u--input
          placeholder="写回复"
          border="none"
          placeholderStyle="font-size:30rpx;color:#ADADAD;"
          color="#ADADAD"
          v-model="value"
          @change="change"
          inputAlign="left"
          @focus="focus"
          @blur="blur"
        ></u--input>
      </view>
      <view class="operate_r" v-if="inp">
        <view class="operate_item" @click="handLike(!like)">
          <image
            src="../../static/images/slices/icon_tlzxq_dianzan.png"
            mode=""
            v-show="!like"
          ></image>
          <image
            src="../../static/images/slices/icon_tlzxq_dianzan_xuanzhong.png"
            mode=""
            v-show="like"
          ></image>
          <view
            class="item_text"
            :style="{
              color: like ? '#55B877' : '#888888',
            }"
          >
            点赞
          </view>
        </view>
        <view class="operate_item">
          <image
            src="../../static/images/slices/icon_tlzxq_zhuanfa.png"
            mode=""
          ></image>
          <view class="item_text"> 转发 </view>
        </view>
        <view class="operate_item" @click="handCollect(!collect)">
          <image
            src="../../static/images/slices/icon_bai_shoucang.png"
            v-show
            mode=""
            v-show="!collect"
          ></image>
          <image
            src="../../static/images/slices/icon_shoucang_z.png"
            mode=""
            v-show="collect"
          ></image>
          <view
            class="item_text"
            :style="{
              color: collect ? '#55B877' : '#888888',
            }"
          >
            收藏
          </view>
        </view>
        <view class="operate_item" @click="givePresent">
          <image
            src="../../static/images/slices/icon_tlzxq_liwu.png"
            mode=""
          ></image>
          <view class="item_text"> 礼物 </view>
        </view>
      </view>
      <view class="sending_btn" v-else @click="send"> 发送 </view>
    </view>

    <u-popup
      :show="show"
      mode="bottom"
      safeAreaInsetTop
      @close="show = false"
      @open="show = true"
      closeable
    >
      <view class="box_group">
        <view class="group_title"> 送出礼物 </view>
        <view class="group_inp">
          <u--input
            placeholder="请输入赠送数量..."
            border="none"
            placeholderStyle="font-size:30rpx;color:#ADADAD;"
            color="#ADADAD"
            v-model="presentNum"
            inputAlign="left"
          ></u--input>
        </view>
        <view class="group_btn">
          <view class="niule">
            <view class="niule_icon"> </view>
            <view class="niule_text"> 1000牛勒 </view>
          </view>
          <view class="group_btn1" @click="colsePresent"> 送出 </view>
        </view>
      </view>
    </u-popup>
	<floatingBall></floatingBall>
  </view>
</template>

<script>
import reviewContent from "@/components/search/reviewContent.vue"; //评论
export default {
  components: {
    reviewContent,
  },
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      list1: [
        {
          name: "回复",
        },
        {
          name: "赞",
        },
        {
          name: "转发",
        },
        {
          name: "收藏",
        },
        {
          name: "礼物",
        },
      ],
      currentIndex: 0,
      text: "说的真好，给你点赞一个！！！",
      value: "",
      inp: true,
      like: false,
      collect: false,
      presentNum: "",
      show: false,
      id:''
    };
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });
    this.getDetail();
  },
  onLoad(options) {
    this.id = options.id
    const arr = [1010, 2110, 2645, 9963, 2645];
    this.list1 = this.list1.map((item, index) => {
      return {
        name: item.name + arr[index],
      };
    });
  },
  methods: {
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    click(e) {
      this.currentIndex = e.index;
      if (e.index == 2) {
        this.text = "转发了这条动态";
      }
      if (e.index == 1) {
        this.text = "点赞了这条动态";
      }
    },
    getDetail() {
      this.$http
        .gongchuangGongDetail({ id: this.id })
        .then((res) => {
          console.log(res,'共创详情')
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    change() {},
    focus() {
      this.inp = false;
    },
    blur() {
      this.inp = true;
    },
    send() {
      console.log("33333");
    },
    handLike(val) {
      this.like = val;
    },
    handCollect(val) {
      this.collect = val;
    },
    givePresent() {
      this.show = true;
    },
    colsePresent() {
      this.presentNum = "";
      this.show = false;
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
  background: #fff;
}

.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    color: #55b877;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}

.zhuan {
  width: 40rpx;
  height: 38rpx;
  margin-left: 40rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.box {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;

  .box_head {
    width: 100%;
    display: flex;
    align-items: center;

    .head_image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .head_flx {
      flex: 1;
      height: 100rpx;
      padding-left: 24rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .flx1 {
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #888888;
      }

      .flx2 {
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #888888;
      }
    }

    .head_right {
      width: 142rpx;
      height: 56rpx;
      background: #55b877;
      border-radius: 32rpx 32rpx 32rpx 32rpx;
      font-size: 26rpx;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .box_content {
    width: 100%;

    .content_t {
      width: 100%;
      font-size: 34rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #474747;
      margin-top: 56rpx;
    }

    .content_text {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #474747;
      line-height: 46rpx;
      margin-top: 40rpx;
    }

    .jiugong {
      margin-top: 32rpx;
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      flex-wrap: wrap;

      // width: 222rpx;
      // height: 222rpx;
      image {
        width: 222rpx;
        height: 222rpx;
      }
    }
  }
}

.distance {
  width: 100%;
  height: 16rpx;
  background: #f7f8fa;
  margin-top: 80rpx;
}

.interaction {
  width: 100%;

  .interaction_tabs {
    border-bottom: 1rpx solid #eee;
  }

  .interaction_box {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
  }
}

.operate {
  width: 100%;
  height: 120rpx;
  background: #fff;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding-left: 20rpx;
  padding-right: 30rpx;
  box-sizing: border-box;

  .inp {
    height: 80rpx;
    background: #f4f4f4;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    padding-left: 32rpx;
  }

  .operate_r {
    width: 264rpx;
    height: 92rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 48rpx;
    .operate_item {
      image {
        width: 48rpx;
        height: 48rpx;
      }

      .item_text {
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #666666;
        margin-top: 8rpx;
      }
    }
  }
  .sending_btn {
    width: 172rpx;
    height: 80rpx;
    background: #55b877;
    border-radius: 40rpx;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 16rpx;
  }
}
.box_group {
  width: 100%;
  height: 576rpx;
  background: #fff;
  padding: 0 30rpx;
  box-sizing: border-box;

  .group_title {
    width: 100%;
    padding: 32rpx 0 56rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #444444;
  }

  .group_inp {
    width: 100%;
    height: 80rpx;
    background: #f4f4f4;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    padding: 0 32rpx;
    box-sizing: border-box;
  }
  .group_btn {
    width: 100%;
    padding: 200rpx 60rpx 46rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .niule {
      display: flex;
      align-items: center;
      .niule_icon {
        width: 12rpx;
        height: 12rpx;
        background: #55b877;
        border-radius: 50%;
      }
      .niule_text {
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #444444;
        margin-left: 16rpx;
      }
    }
    .group_btn1 {
      width: 172rpx;
      height: 64rpx;
      background: #55b877;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }
  }
}
</style>